<template>
  <div class="school-card" @click="jumpToSchoolDetail(schoolInfo)">
    <img class="icon" :src="schoolInfo.icon" alt="" />
    <div class="info-box">
      <div class="top">
        <div class="name">{{ schoolInfo.name }}</div>
        <div
          class="tags"
          v-if="schoolInfo.collegeType || schoolInfo.dualClassName"
        >
          <div class="tags-item">{{ schoolInfo.collegeType }}</div>
          <div
            class="tags-item"
            v-for="(item, index) in schoolInfo.dualClassName
              ? schoolInfo.dualClassName.split(',').slice(0, 3)
              : []"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="title">院校位置</div>
        <div class="position">
          <span class="province">{{ schoolInfo.provinceName }}</span>
          <div
            v-if="
              schoolInfo.cityName != '北京市' &&
              schoolInfo.cityName != '上海市' &&
              schoolInfo.cityName != '重庆市' &&
              schoolInfo.cityName != '天津市'
            "
          >
            · {{ schoolInfo.cityName }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'; // 导入路由
const router = useRouter();
const route = useRoute();
const props = defineProps({
  schoolInfo: {
    type: Object,
    default: () => {},
  },
});
const jumpToSchoolDetail = (item) => {
  if (route.query.showSearch) {
    return;
  }
  router.push({
    name: 'SchoolDetail',
    query: {
      dataId: item.collegeId,
      dataName: item.name,
    },
  });
};
</script>

<style lang="scss" scoped>
.school-card {
  width: 100%;
  background: #ffffff;
  border-radius: 13px;
  border: 2px solid #ebf0f5;
  box-sizing: border-box;
  padding: 32px 38px;
  display: flex;
  align-items: center;
  .icon {
    width: 70px;
    height: 70px;
  }
  .info-box {
    margin-left: 42px;
    width: 100%;
    .top {
      display: flex;
      align-items: center;
      margin-bottom: 18px;
      .name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 28px;
        color: #222222;
        margin-right: 20px;
      }
      .tags {
        display: flex;
        gap: 9px;
        .tags-item {
          background: #f1f8f6;
          border-radius: 3px;
          padding: 4px 10px 0 10px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22px;
          color: #4fa499;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100px;
        }
      }
    }
    .bottom {
      display: flex;
      align-items: center;
      .title {
        margin-right: 12px;
        font-size: 22px;
        color: #9cabb7;
      }
      .position {
        display: flex;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 20px;
        color: #666666;
        .province {
          margin-right: 6px; // 调整间距，使省份和城市之间有间距
        }
      }
    }
  }
}
</style>
